<template>
  <div class="sdfgdgty">
    <n-card>
      <StockInformation :code="codes" v-if="codes" @getInfo="getInfo"></StockInformation>
      <n-space vertical v-else>
        <n-skeleton height="55px" width="100%" />
      </n-space>
    </n-card>
    <div class="display-flex mt10 ">
      <div class="details-left">

        <div>
          <Cinformation :Art_Code="Art_Code" @getCode="getCode"></Cinformation>
        </div>


      </div>
      <div class="ml10 details-center" v-if="codes">
        <KLine :code="codes"></KLine>
        <div class="mt10">
          <TimeSharingChart :code="codes" :info="info" v-if="info" />
        </div>

        <div class="mt10" v-if="codes">
          <Plate :code="codes"></Plate>
        </div>
      </div>
      <div class="ml10 flex-1" v-if="codes">


        <div v-if="codes">
          <MoneyFlows :code="codes"></MoneyFlows>
        </div>
        <div class="mt10">
          <TheMainTrend :code="codes"></TheMainTrend>

        </div>
        <div class="mt10">
          <HistoricalDataOverview :code="codes"></HistoricalDataOverview>
        </div>

      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from "vue";
import { dxget, qurl } from "../../util/index";
import StockInformation from "../../components/details/StockInformation.vue";
import Cinformation from "../../components/details/Cinformation";
import MoneyFlows from "../../components/details/MoneyFlows";
import Plate from "../../components/details/Plate";
import TheMainTrend from "../../components/details/TheMainTrend";
import EventToRemind from "../../components/details/EventToRemind";
import HistoricalDataOverview from "../../components/details/HistoricalDataOverview";

import TimeSharingChart from "../../components/details/TimeSharingChart";
import KLine from "../../components/details/KLine";
let Art_Code = qurl().Art_Code;
let codes = ref();
let info = ref()
const getCode = (data) => {
  codes.value = data;
};
const getInfo = (data) => {
  info.value = data;
};
</script>
<style scoped>
.details-top {
  line-height: 1.5;
}

.details-left {
  width: 550px;
}

.details-center {
  width: 600px;
}

.dfrrewr {
  height: 510px;
  overflow: auto;
}
</style>
